:root {
  --money: #009933;
  --light: #ffff00;
}

body {
  margin: 0;
}
.red-text {
  color: red;
  font-weight: bold;
}
.disclaimer {
  font-size: 0.7em;
}
.pure-button,
.hist-btn {
  width: 140px;
  margin: 10px;
  background: white;
  border: 1px solid darkblue;
  border-radius: 5px;
  box-shadow: 5px 6px #888888;
}
.hist-btn,
.btn {
  height: 92px;
}
.hist-btn:hover {
  cursor: pointer;
  background-color: whitesmoke;
}
#nba,
#nhl,
#mlb {
  width: 70px;
  height: auto;
}
.btn-active {
  width: 200px;
  margin: 10px;
  transform: scale(0.95);
  box-shadow: 2px 3px #888888;
}
.menu {
  text-align: center;
}
thead {
  text-align: left;
}
.center {
  text-align: center;
  font-weight: bold;
  background-color: black;
  color: white;
}
.center-text {
  text-align: center;
}
.header {
  background-image: url("../images/sports-header.jpg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin-bottom: -75px;
  padding: 5px;
  height: 180px;
  position: sticky;
  top: 0;
}
h1 {
  text-align: left;
  font-size: 70px;
  color: white;
  padding-top: 3px;
}

.sports-lines,
.history-table {
  border-collapse: collapse;
  font-size: 0.7em;
}
.sports-bet {
  border-collapse: collapse;
  font-size: 0.8em;
  margin-top: 10px;
  margin-left: 28px;
}
.sports-lines td,
.sports-lines th,
.sports-bet td,
.sports-bet th,
.history-table td,
.history-table th {
  border: 1px solid #ddd;
  padding: 5px;
}
.sports-lines tr:nth-child(even),
.sports-bet tr:nth-child(even),
.history-table tr:nth-child(even) {
  background-color: #f2f2f2;
}

.sports-lines tr:hover,
.sports-bet tr:hover,
.history-table tr:hover {
  background-color: #ddd;
}

.sports-lines th,
.sports-bet th,
.history-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: darkblue;
  color: white;
}

td,
th {
  font-size: 0.8em;
}
td {
  text-align: right;
}
.sports-standings {
  width: 100%;
}
.sports-standings img {
  width: 30px;
  height: auto;
}
.sports-standings td {
  text-align: left;
}

.fas {
  margin-right: 2px;
  color: var(--money);
}
.btnBet {
  background-color: white;
  border-color: var(--money);
}
.btnBet:hover {
  cursor: pointer;
  transform: scale(1.1);
  background-color: var(--light);
}

.hidden {
  display: none;
}
/* Styles for custom modal */
#sports-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 20px;
  top: 250px;
  width: 90%;
  height: 55%;
  overflow: auto; /* Enable scroll if needed */
  background-color: white;
  border: 1px solid darkblue;
  font-size: 0.6em;
}

#sports-modal input {
  display: inline;
}
.sports-bet td {
  padding-left: 5px;
  text-align: center;
}
.sports-bet td input[type="number"] {
  width: 60px;
}
#sports-modal form .sports-bet td,
.sports-bet th {
  font-size: 1em;
}
.body-head {
  background-color: black;
  color: white;
  font-weight: bold;
}

#close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
#close:hover,
#close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.modalheader {
  border: 1px solid black;
  background-color: grey;
  height: 65px;
}

/* media queries */
/* 480px */
@media screen and (min-width: 30em) {
  .pure-button,
  .hist-btn {
    width: 200px;
  }

  .hist-btn,
  .betx {
    height: 93px;
  }
  .sports-lines,
  .history-table {
    font-size: 0.9em;
  }
  .header {
    margin-bottom: -50px;
  }
}
/* 600px */
@media screen and (min-width: 37.5em) {
  .header {
    margin-bottom: -20px;
  }

  .sports-lines,
  .sports-standings,
  .history-table {
    width: 94%;
    margin-left: 18px;
  }
}

/* 650px */
@media screen and (min-width: 40.6em) {
  .pure-button,
  .hist-btn {
    width: 250px;
  }
}

/* 768px */
@media screen and (min-width: 48em) {
  #sports-modal {
    width: 40%;
    left: 250px;
    font-size: 1em;
  }

  .sports-bet td input[type="number"] {
    width: 120px;
  }

  .sports-standings {
    font-size: 1em;
    margin-left: 18px;
    width: 100%;
  }
  .sports-lines,
  .history-table {
    font-size: 1em;
    margin-left: 18px;
    width: 90%;
  }

  .header {
    margin-bottom: 15px;
  }
}